<template>
  <div>
    <div class="bg-body" c-black h-8 lh-8 flex items-center px2>
      <MyMenuItem title="文件">
        <MyMenuSubItem @click="saveOProject" title="保存" />
        <MyMenuSubItem @click="clearOProject" title="重置" />
      </MyMenuItem>
      <MyMenuItem title="按键精灵" v-if="oProject?.modulesEnabled.includes('keymouse')">
        <MyMenuSubItem @click="onClickActionRecord" title="动作录制" />
      </MyMenuItem>
      <MyMenuItem title="设置">
        <MyMenuSubItem title="色彩模式">
          <MyMenuSubItem @click="dark = !dark" title="切换" />
        </MyMenuSubItem>
      </MyMenuItem>
    </div>
    <MyDivide />
  </div>

</template>

<script setup lang="ts">
import { useDark } from '@vueuse/core';
import { onClickActionRecord } from '~/models/keymouse';
import { saveOProject, clearOProject, oProject } from '~/models/Project/index'

const dark = useDark()
</script>